<template>
  <ul class="home-left-menus">
    <li v-for="(m, i) in menus.children" :key="i" :class="{current: i == currentMenuIndex}" @click="gotoMenu(m, i)">
      <i class="iconfont" :class="`icon-${m.icon}`"/>
      <div class="text">{{m.name}}</div>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'HomeLeftMenus',
  data () {
    return {
      currentMenuIndex: 0
    }
  },
  computed: {
    menus () {
      return this.$store.getters['system/activedMenu']
    }
  },
  mounted () {
    //
  },
  methods: {
    gotoMenu (menu, index) {
      this.currentMenuIndex = index
      this.$router.push(menu.path)
    }
  }
}
</script>

<style lang="less" scoped>
.home-left-menus{
  padding: 20px;
  background: #FFF;
  li{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 36px;
    font-size: 14px;
    font-weight: bold;
    color: #666;
    transition: all .2s;
    cursor: pointer;
    &:hover{
      color: #F95160;
    }
    &.current{
      color: #F95160;
      background-image: linear-gradient(270deg, #FFEBEB 0%, #FFD5DC 100%);
      border-radius: 5px;
    }
    .iconfont{
      margin-right: 10px;
    }
  }
}
</style>
